<style  scoped>
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #909aa0;
}
.layout-header-bar-left {
  float: left;
  width: 80%;
}
.layout-header-bar-left > div,
.layout-header-bar-right > div {
  float: left;
}
.layout-header-bar-right {
  float: right;
}
.portrait {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: red;
  margin: 15px 0 0;
}
.ivu-layout-content {
  background: none !important;
}
.ivu-layout-header {
  padding: 0 30px;
}

.genedata {
  height: 850px;
  border: 1px solid #e5ebec;
  background: #fff;
  color: #333b47;
}
.genedata-table {
  width: 100%;
  height: 100%;
  padding: 15px 15px 35px;
  box-sizing: border-box;
}
.ivu-table-wrapper {
  height: 100%;
}
.genedata-table .ivu-table td {
  height: 40px;
}
.fontColor {
  color: #2d8cf0;
  cursor: pointer;
}
</style>

<template>
    <Layout>
        <Header class="layout-header-bar">
        <div class="layout-header-bar-left">
            <div style="width:60%;margin-right:10px;">
              <Input v-model="formDynamic.searchValue" icon="ios-search" placeholder=" 搜索基因/患者编号" @on-click="confirmSearch" @on-enter="confirmSearch"/>
            </div>
            <Button icon="ios-funnel" @click="filterModal=true">筛选</Button>
            <Modal v-model="filterModal" title="输入筛选条件" @on-ok="confirmSearch" @on-cancel="cancel">
               <Form ref="formDynamic" :model="formDynamic" >
                <FormItem>
                    <Row :gutter="16">
                        <Col span="6">
                            <Button type="primary" @click="handleAdd" icon="md-add">添加条件</Button>
                        </Col>
                        <Col span="8">
                          <Select v-model="formDynamic.items[0].searchId">
                              <Option v-for="(one,index) in typeList" :value="one.value" :key="index">{{ one.label }}</Option>
                          </Select>                           
                        </Col>
                        <Col span="8">
                            <Input type="text" v-model="formDynamic.items[0].searchValue"></Input>
                        </Col>                        
                    </Row>
                </FormItem>                
                <FormItem v-for="(item, index) in formDynamic.items"  :key="index" v-if="index>0&&item.status">
                    <Row :gutter="16">
                        <Col span="6">
                            <Select v-model="item.searchType">
                              <Option v-for="(one,index) in logicList" :value="one.value" :key="index">{{ one.label }}</Option>
                          </Select>  
                        </Col>
                        <Col span="8">
                          <Select v-model="item.searchId">
                              <Option v-for="(one,index) in typeList" :value="one.value" :key="index">{{ one.label }}</Option>
                          </Select>                           
                        </Col>
                        <Col span="8">
                            <Input type="text" v-model="item.searchValue"></Input>
                        </Col>
                        <Col span="2">
                          <Icon type="md-close-circle" size="24" style="color:#E74A25" @click="handleRemove(index)"/>
                        </Col>
                    </Row>
                </FormItem>
              </Form>
            </Modal>

        </div>
        <div class="layout-header-bar-right">
            <div class="portrait"></div>
            <div style="margin:0 10px;">admin
            <Icon type="md-arrow-dropdown"/>
            </div>
            <div>
            <Icon type="md-settings"/>
            </div>
        </div>
        </Header>
        <Content :style="{margin: '20px', background: '#fff'}">
            <div class="genedata">
                <div class="genedata-table">
                  <Table border :columns="mutation_columns" :data="mutationData" height="750" :loading="loading" @on-sort-change="sortChange">
                    <template slot-scope="{ row,index,column }" slot="mutation">
                      <Tooltip :content="mutationDetail[index]">
                        <span class="fontColor" @click="toMutation(row)">{{ row.mutation }}</span>
                      </Tooltip>
                    </template>
                  </Table>
                  <div style="margin:12px 0;float:right;">
                      <Page :total="genedataTotal" size="small" show-elevator show-total :page-size="20" @on-change="pageChange" :current="currentPage" />
                  </div>
                </div>
            </div>
        </Content>
    </Layout>
</template>

<script>
import { varca } from "@/api/index";
export default {
  name: "mutationData",
  data() {
    return {
      mutationDetail:[],
      geneName: "",
      filterModal: false,
      loading: false,
      currentPage: 1,
      genedataTotal: 0,
      mutation_columns: [
        {
          title: "基因",
          key: "gene",
          sortable: true
        },
        {
          title: "突变位点",
          key: "mutation",
          slot: "mutation",
          sortable: true
        },
        {
          title: "丰度",
          key: "freq",
          sortable: true
        },
        {
          title: "癌肿",
          key: "cancer",
          sortable: true
        },
        {
          title: "研究",
          key: "study",
          sortable: true
        },
        {
          title: "检测样本编号",
          key: "sid",
          sortable: true
        },
        {
          title: "患者数",
          key: "count",
          sortable: true
        }
      ],
      mutationData: [],
      itemIndex: 0,
      formDynamic: {
        searchId:"",
        searchValue:"",
        page:1,
        order:"",
        field:"",
        items: [
          {
            searchId: "",
            searchValue: "",
            searchType:"and",
            index: 0,
            status: 1
          }
        ]
      },
      logicList: [
        {
          value: "and",
          label: "并且"
        },
        {
          value: "or",
          label: "或者"
        },
        {
          value: "not",
          label: "不含"
        }
      ],
      typeList: [
        {
          value: "gene",
          label: "基因"
        },
        {
          value: "mutation",
          label: "突变位点"
        },
        {
          value: "freq",
          label: "丰度"
        },
        {
          value: "sample",
          label: "样本"
        },
        {
          value: "cancer",
          label: "癌种"
        },
        {
          value: "study",
          label: "研究"
        },
        {
          value: "count",
          label: "患者数"
        },
        {
          value: "sid",
          label: "检测样本编号"
        }
      ]
    };
  },
  methods: {
    cancel(){
    },
    pageChange(index) {
      this.currentPage=index;
      this.formDynamic.page=index;
      this.searchMutationData()
    },
    handleAdd() {
      this.itemIndex++;
      this.formDynamic.items.push({
        searchType: "",
        searchId: "",
        searchValue: "",
        index: this.itemIndex,
        status: 1
      });
    },
    handleRemove(index) {
      this.formDynamic.items[index].status = 0;
      this.$delete(this.formDynamic.items,index)
    },
    confirmSearch(){
      this.formDynamic.field="";
      this.formDynamic.order="";
      this.searchMutationData();
    },
    sortChange(column){
      this.formDynamic.field=column.key;
      this.formDynamic.order=column.order;
      this.searchMutationData()
    },
    searchMutationData(){
      this.loading=true;
      let obj=this.formDynamic;
      varca.searchMutationData(obj).then(res=>{
        if(res.status==200){
          this.genedataTotal=res.data.count;
          this.loading=false;
          this.mutationData=res.data.samples;
          for(let i=0;i<this.mutationData.length;i++){
            this.mutationDetail[i]="Chr"+this.mutationData[i].chr+":"+this.mutationData[i].pos+"-"+this.mutationData[i].end+" "+this.mutationData[i].tumorAllele1+">"+this.mutationData[i].tumorAllele2;
          }
          // “Chr”+chr+":"+pos+"-"+end+" "+tumorAllele1+">"+tumorAllele2
        }else{
          this.loading=true;
          this.$Message.error(res.msg)
        }
        
      }).catch(error=>{
        this.$Message.error(error)
      })
    },
    toMutation(row) {
      this.$store.state.mutationData = row;
      this.$router.push({ name: "variantlocusmutation" });
    },
  },
  mounted(){
    this.searchMutationData();
  }
};
</script>


